<template>
    <div id='login' :style="{
        backgroundImage: 'url(' + require('../assets/bkgimg.png') + ')', 
        backgroundSize:'400px',
        backgroundRepeat:'repeat',
        backgroundPosition:'center center',height:'60%',width:'100%'}">
        
        <div class="bg">
        <div class="bg2">
        
        <div id="hdnav">
            <router-link to="/" >登录</router-link> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
                <router-link to="/register" >注册</router-link>
        </div>

        <el-row :gutter="20">
            <el-col :span="20" :offset="2">
                <el-form ref="form" :model="form"  status-icon :rules="rules" label-width="80px">
                    <el-form-item label="账户名称" prop='managerName'>
                        <el-input v-model="form.managerName"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop='managerPassword'>
                        <el-input  show-password v-model="form.managerPassword"></el-input>
                    </el-form-item>
                    <el-form-item>
                         <el-row :gutter="20">
                              <el-col :span="3" :offset="3">
                                     <el-button @click="resetForm('form')">取消</el-button>
                              </el-col>
                              <el-col :span="3" :offset="8" >
                                      <el-button type="primary" :disabled="btnEnable" class="submit" @click="onSubmit">登录</el-button>
                              </el-col>                       
                         </el-row>
                    </el-form-item>
                </el-form>    
            </el-col>
        </el-row>
        </div>       
        </div>       
    </div>
</template>

<script>
export default {
    name:'login',
     data() {
        var checkName = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('账户名称不能为空'));
            this.check.managerName=false;
            } else {                
                this.check.managerName=true;
                callback();
                if(this.check.managerName&&this.check.managerPassword){
                      this.btnEnable=false;        
                }
            }
        };
        var checkPassword = (rule, value, callback) => {
            if (value === '') {
                this.check.managerPassword=false;
            callback(new Error('密码不能为空'));
            } else {
                this.check.managerPassword=true;
                callback();
                if(this.check.managerName&&this.check.managerPassword){
                         this.btnEnable=false;                 
                }
            }
        };
      return {
        form: {
          managerName:'',
          managerPassword:''
        },
        rules: {
          managerName: [
            { validator: checkName, trigger: 'blur' }
          ],
          managerPassword: [
            { validator: checkPassword, trigger: 'blur' }
          ],          
        },
        btnEnable:true,
        check:{
            managerName:'',
            managerPassword:''
        }
      }
    },
    methods: {
      onSubmit() {
        this.$axios.post('/login',this.form)
        .then(resp=>{
           
            if(resp.data.success){
                localStorage.setItem('manager',resp.data.data.managerName);
                localStorage.setItem('managerId',resp.data.data.managerId);
                
                this.$router.push({
                   
                    path:"/auditUser",
                })  
            }else{
                this.$message({
                    message:resp.data.message,
                    type:"warning"
                })
            }
            
        })
        .catch(error=>{
            this.$message.error('系统未知错误');
            console.log(error);
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    mounted(){
        if(this.$route.query.registerMessage){
            this.$message({
                message:this.$route.query.registerMessage,
                type:'success'
            })
        }
        if(this.$route.query.message){
            this.$message({
                message:this.$route.query.message,
                type:'warning'
            })
        }
        
    }
}
</script>

<style>
#hdnav {
  padding: 30px;
}
.bg{
    
    width: 500px;
    height:700px;
    margin:auto;
    overflow: hidden;
}
.bg2{
    background-color: rgb(2, 206, 189);
    width: 500px;
    margin-top:100px;
    
}
</style>